<template>
	<view>
		<view class="topBox">
			<view class="starBox" style="padding: 20rpx 0;">
				<view class="star_tit">
					{{details.ProductName}}
				</view>
				<view class="starCell" v-for="(item, index) in evaList" :key="item.id">
					<!-- <view class="starText">{{ item.title }}</view> -->
					<view class="imgbox">
						<view class="starImg" v-for="(items, indexs) in 5" :key="indexs" @click="chooseStar(index, indexs)">
							<image class="starPic" :src="whatStar(index, indexs)" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="starBox dynamic_con">
				<view class="txt">
					<u--textarea v-model="textContent" border="bottom" placeholder="请写下您的评价"></u--textarea>
				</view>
			</view>
			<view class="starBox imgvideo" v-if="localList.length == 0 || localList[0].fileType == 'image'">
				<view class="item" @click="lookImg(localList,index)" v-for="(item, index) in localList" :key="index">
					<view class="del_con" @click.stop="delImg(index)">
						<uni-icons type="closeempty" color="#fff" size="16"></uni-icons>
					</view>
					<image :src="item.tempUrl" mode="aspectFill" />
					<view class="pro" v-if="item.pro != 100">已上传:{{ item.pro + '%' }}</view>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<view class="item item_add" v-if="localList.length < 9" @click="selectImg_MP()"></view>
				<!-- #endif -->

				<!-- #ifdef APP-PLUS -->
				<view class="item item_add" v-if="localList.length < 9" @click="selectImg_APP()"></view>
				<!-- #endif -->
			</view>

			<view class="takeBtn" @click="sub">提交</view>
		</view>
	</view>
</template>

<script>
export default {
	components: {},

	data() {
		return {
			evaList: [
				{
					id: 's1',
					title: '评价',
					star: 0
				},
				// {
				// 	id: 's2',
				// 	title: '技术',
				// 	star: 0
				// },
				// {
				// 	id: 's3',
				// 	title: '态度',
				// 	star: 0
				// },
				// {
				// 	id: 's4',
				// 	title: '教学',
				// 	star: 0
				// }
			],
			textContent: '', //评价内容
			localList: [],
			ID: '',
			productID:'',
			orderID: '',
			OrderItemID:'',
			details:{}
		};
	},
	computed: {},
	onLoad(e) {
		console.log(e);
		this.productID = e.productID;
		this.orderID = e.orderID;
		this.OrderItemID = e.OrderItemID
		this.getProducts()
	},
	methods: {
		async getProducts(){
			let res = await this.$api.post('/Products/Detail', {
				ID: this.productID,
			});
			this.details = res.data
		},
		
		//判断是已灰色星星还是黄色（选中）状态的星星 lindex:evaList的index,sindex:选中的第几颗星星
		whatStar(lindex, sindex) {
			let staring;
			let starhalf;
			let stared;
			if (lindex == 0) {
				//总体高亮
				staring = 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1713853354322424.png';
				//总体半亮
				starhalf = 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1713853365936666.png';
				//总体灰色
				stared = 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17138537770581315.png';
			} else {
				staring = 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17138533786641363.png';
				starhalf = 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17138533895031496.png';
				stared = 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1713853790278774.png';
			}

			const num = this.evaList[lindex].star;
			const starNum = sindex + 1;
			return num - starNum >= 0 ? staring : num - starNum == -0.5 ? starhalf : stared;
		},
		// 点击选择星星
		chooseStar(lindex, sindex) {
			const starNum = this.evaList[lindex].star;
			const chooseStar = sindex + 1;
			const cNum = Math.abs(starNum - chooseStar);
			if (cNum > 0.5 || starNum-chooseStar == 0.5) {
				this.evaList[lindex].star = chooseStar - 0.5;
			} else if (cNum == 0) {
				this.evaList[lindex].star = starNum - 0.5;
			}else if(chooseStar-starNum == 0.5){
				this.evaList[lindex].star = starNum + 0.5;
			}
		},
		delImg(index) {
			console.log(index);
			this.localList.splice(index, 1);
		},
		lookImg(arr,index) {
			let list = arr.map(item => item.tempUrl);
			uni.previewImage({
				urls: list,
				current: index
			})
		},
		// 文件选择
		selectImg_MP(index) {
			let _this = this;

			let ind = 1;

			uni.chooseMedia({
				count: 9-_this.localList.length,
				mediaType: ['image'],
				sourceType: ['album', 'camera'],
				// maxDuration: 30,
				camera: 'back',
				success(res) {
					//判断：如果是视频，只取一个视频文件，并提示用户；
					if (res.tempFiles[0].fileType === 'video') {
						let o = {
							duration: res.tempFiles[0].duration,
							fileType: res.tempFiles[0].fileType,
							tempUrl: res.tempFiles[0].thumbTempFilePath,
							// item.
							flieUrl: res.tempFiles[0].tempFilePath,
							tempKey: uni.$u.guid(8),
							pro: 0
						};
						uni.getVideoInfo({
							src: res.tempFiles[0].thumbTempFilePath,
							success: function (image) {
								console.log('video size  ---' + JSON.stringify(image));

								let max = 560;
								if (image.height > image.width) {
									_this.vHight = max;
									_this.vWidth = max * (image.width / image.height);
								} else {
									max = 600;
									_this.vWidth = max;
									_this.vHight = max * (image.height / image.width);
								}

								_this.reqData.VideoInfo = _this.vWidth + '|' + _this.vHight;

								console.log('video size' + _this.reqData.VideoInfo);
							}
						});

						_this.localList.push(o);

						_this.uploading(o.flieUrl, o.tempKey);

						return;
					}

					res.tempFiles.forEach(async (item) => {
						let o = {
							duration: 0,
							fileType: item.fileType,
							tempUrl: item.tempFilePath,
							flieUrl: item.tempFilePath,
							tempKey: uni.$u.guid(8),
							pro: 0
						};

						if (ind == 1) {
							_this.localList.push(o);
						} else {
							_this.localList.splice(ind, 1, o);
						}
						await _this.uploading(o.flieUrl, o.tempKey);

						ind = ind + 1;
					});
				}
			});
		},
		//全类型上传
		selectImg_APP() {
			let _this = this;
			uni.showActionSheet({
				itemList: ['拍摄视频', '选择照片', '选择视频', '取消'],
				success: function (res) {
					if (res.tapIndex == 0) {
						uni.chooseVideo({
							sourceType: ['camera'], // 从相册、相机获取视频
							maxDuration: 300, // 最大录制时间为60s
							camera: 'back', // 默认后置摄像头
							success(res) {
								console.log('选择的视频信息：', res);

								//清空已选中文件
								_this.localList = [];

								const tempFilePath = res.tempFilePath; // 临时文件路径
								// TODO: 处理选择的视频文件
								let o = {
									duration: 0,
									fileType: 'video',
									tempUrl: tempFilePath,
									flieUrl: tempFilePath,
									tempKey: uni.$u.guid(8),
									pro: 0
								};

								_this.localList.push(o);

								_this.uploading(o.flieUrl, o.tempKey);
							},
							fail(err) {
								console.error('选择视频失败：', err);
							}
						});
					} else if (res.tapIndex == 1) {
						let ind = 1;
						uni.chooseImage({
							// count:  允许上传的照片数量
							count: 9-_this.localList.length,
							// sizeType:  original 原图，compressed 压缩图，默认二者都有
							sizeType: ['original', 'compressed'],
							sourceType: ['album'],
							success(res) {
								console.log(res);
								res.tempFiles.forEach(async (item) => {
									let o = {
										duration: 0,
										fileType: 'image',
										tempUrl: item.path,
										flieUrl: item.path,
										tempKey: uni.$u.guid(8),
										pro: 0
									};

									if (ind == 1) {
										_this.localList.push(o);
									} else {
										_this.localList.splice(ind, 1, o);
									}
									await _this.uploading(o.flieUrl, o.tempKey);

									ind = ind + 1;
								});
							}
						});
						return;
					} else if (res.tapIndex == 2) {
						uni.chooseVideo({
							sourceType: ['album'], // 从相册、相机获取视频
							maxDuration: 60, // 最大录制时间为60s
							camera: 'back', // 默认后置摄像头
							success(res) {
								console.log('选择的视频信息：', res);
								const tempFilePath = res.tempFilePath; // 临时文件路径
								// TODO: 处理选择的视频文件

								let o = {
									duration: 0,
									fileType: 'video',
									tempUrl: tempFilePath,
									flieUrl: tempFilePath,
									tempKey: uni.$u.guid(8),
									pro: 0
								};

								_this.localList.push(o);

								_this.uploading(o.flieUrl, o.tempKey);
							},
							fail(err) {
								console.error('选择视频失败：', err);
							}
						});

						return;
					}
				},
				fail: function (res) {}
			});
		},
		//照片
		selectImg_APP() {
			let _this = this;
			uni.showActionSheet({
				itemList: ['选择照片','取消'],
				success: function (res) {
					if (res.tapIndex == 0) {
						let ind = 1;
						uni.chooseImage({
							// count:  允许上传的照片数量
							count: 9-_this.localList.length,
							// sizeType:  original 原图，compressed 压缩图，默认二者都有
							sizeType: ['original', 'compressed'],
							sourceType: ['album'],
							success(res) {
								console.log(res);
								res.tempFiles.forEach(async (item) => {
									let o = {
										duration: 0,
										fileType: 'image',
										tempUrl: item.path,
										flieUrl: item.path,
										tempKey: uni.$u.guid(8),
										pro: 0
									};
		
									if (ind == 1) {
										_this.localList.push(o);
									} else {
										_this.localList.splice(ind, 1, o);
									}
									await _this.uploading(o.flieUrl, o.tempKey);
		
									ind = ind + 1;
								});
							}
						});
						return;
					}
				},
				fail: function (res) {}
			});
		},
		// 文件上传
		async uploading(url, tempKey) {
			console.log('url ----------' + url);

			const r = await this.$upload(url, (pro) => {
				this.localList.forEach((item) => {
					if (item.tempKey == tempKey) {
						item.pro = pro;
					}
				});
			});
			this.localList.forEach((item) => {
				if (item.tempKey == tempKey) {
					item.netPath = r;
				}
			});

			console.log('upload file ' + r);
		},

		async sub() {
			const elist = this.evaList
			for (let i in elist) {
				if(elist[i].star == 0){
					this.$pv.msg('请选择'+elist[i].title+'分数');
					return
				}
			}
			if (!this.textContent) {
				this.$pv.msg('请输入评价内容');
				return;
			}
			let EvalImgs =  this.localList.length ? this.localList.map(item=>item.netPath).join(',') : '' 
			let res = await this.$api.post('/Order/EvalProduct', {
				ProductID: this.productID,
				OrderID:this.orderID,
				Content: this.textContent,
				EvalScore: this.evaList[0].star,
				Imgs:EvalImgs,
				OrderItemID:this.OrderItemID
			});
			if (!res.data) {
				this.$pv.msg(res.message);
			} else {
				this.$pv.msg('评价完成');
				uni.$emit('EvaSuccess')
				setTimeout(() => {
					uni.navigateBack();
				}, 700);
			}
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: rgb(248, 248, 248);
}
view {
	box-sizing: border-box;
}
.topBox {
	width: 100%;
	padding: 20rpx 30rpx;
	padding-bottom: 40rpx;
	.starBox {
		width: 100%;
		background-color: white;
		border-radius: 20rpx;
		padding: 20rpx 30rpx;
		.star_tit{
			font-weight: bold;
			padding-left: 30rpx;
			font-size: 28rpx;
		}
		.starCell {
			width: 100%;
			display: flex;
			align-items: center;
			margin: 10rpx 0;
			.starText {
				width: 70rpx;
				font-size: 28rpx;
				color: #333;
			}
			.imgbox {
				flex: 1;
				display: flex;
				align-items: center;
			}
			.starImg {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 20%;
				height: 100rpx;
				.starPic {
					width: 80rpx;
					height: 80rpx;
					display: block;
				}
			}
		}
		.starCell:first-child {
			.starText {
				font-size: 32rpx;
			}
			.starPic {
				width: 80rpx;
				height: 80rpx;
				display: block;
			}
		}
	}
}
.dynamic_con {
	margin-top: 20rpx;
	//padding-left: 32rpx;
	padding-right: 32rpx;
	//background: #202020;
	border-radius: 16rpx;

	.tit {
		height: 100rpx;
		border-bottom: 1px solid #404040;

		input {
			height: 100rpx;
			width: 100%;
			font-weight: 32rpx;
		}
	}

	.txt {
		min-height: 200rpx;
		height: 200rpx;

		/deep/ .u-textarea {
			background: none !important;
			padding-left: 0 !important;
			padding-right: 0 !important;
			border-bottom: none !important;
		}

		/deep/ .u-textarea__count {
			background: none !important;
			color: #fff !important;
		}
	}

	.act {
		line-height: 40rpx;
		color: #55aaff;
	}
}
.imgvideo {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

	&::after {
		height: 1px;
		width: 192rpx;
		display: block;
		content: '';
	}
}
.item {
	position: relative;
	margin-top: 15rpx;
	width: 192rpx;
	height: 192rpx;
	background-color: #eee;
	border-radius: 16rpx;

	.pro {
		position: absolute;
		top: 50%;
		width: 100%;
		transform: translateY(-50%);
		text-align: center;
		color: #3a3a3a;
	}

	image {
		height: 100%;
		width: 100%;
		border-radius: 16rpx;
	}

	.del_con {
		position: absolute;
		top: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.4);
		height: 40rpx;
		width: 40rpx;
		text-align: center;
		line-height: 40rpx;
		border-radius: 0 16rpx 0 16rpx;
	}
}
.item_add {
	position: relative;

	&::before,
	&::after {
		display: block;
		content: '';
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		position: absolute;
		height: 40rpx;
		width: 8rpx;
		border-radius: 8rpx;
		background: #fff;
		border-radius: 10rpx;
	}

	&::before {
		transform: rotate(90deg);
	}
}
.takeBtn {
	width: 100%;
	text-align: center;
	padding: 20rpx 0;
	background-color: #ff6634;
	margin-top: 30rpx;
	font-size: 30rpx;
	font-weight: bold;
	border-radius: 20rpx;
	color: white;
}
</style>
